import React,{ useEffect, useState } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
function List() {
  // 列表封装页
  let navigate=useNavigate()
   let [list,setList]=useState([])
      const data=async()=>{
        const req=await axios.get('/api/room/list')
        const newList=req.data.data.list
        setList(list.concat(newList))
      }
  useEffect(()=>{
    data()
  },[])
  const toDeat=(item)=>{
const url=`/detail/${item.id}`
navigate(url,{state:item})

  }
  return (
    <div>
<div>
  {
 list.map((item,v)=>{
  return <dl key={v} onClick={()=>toDeat(item)} >
    <dt>
      <img src={item.url} alt=""style={{width:'150px'}} />
    </dt>
    <dd>
      <h4>{item.name}</h4>
      <p>{item.title}</p>
    </dd>
  </dl>
 })
  }
</div>
    </div>
  )
}

export default List